<template>
  <div>
    <CategorySelector :disabled="!isShowAttrList" />
    <AttrList
      v-if="isShowAttrList"
      @setIsShowAttrList="setIsShowAttrList"
      @setCurrentAttr="currentAttr = $event"
    />
    <AddOrUpdateAttr v-else @setIsShowAttrList="setIsShowAttrList" :currentAttr="currentAttr" />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'Attr',
  });
</script>

<script lang="ts" setup>
  import { ref } from 'vue';
  import CategorySelector from '../category-selector/index.vue';
  import AttrList from './components/AttrList.vue';
  import AddOrUpdateAttr from './components/AddOrUpdateAttr.vue';
  import { PickAttrModel } from '/@/api/product/model/attrModel';

  const isShowAttrList = ref<boolean>(true);
  const currentAttr = ref<PickAttrModel>({
    attrName: '',
    attrValueList: [],
  });

  const setIsShowAttrList = (val: boolean) => {
    isShowAttrList.value = val;
  };
</script>
